<template>
  <div class="md:flex">
    <template v-for="(item, index) in dataList" :key="item.title">
      <ChartCard
        :loading="loading"
        :title="item.title"
        :total="getTotal(item.total, index)"
        class="md:w-1/4 w-full !md:mt-0 !mt-4"
        :class="[index + 1 < 4 && '!md:mr-4']"
      >
        <template #action>
          <a-tooltip title="指标说明">
            <Icon :icon="item.icon" :size="20" />
          </a-tooltip>
        </template>
        <div v-if="type === 'chart'">
         <span v-if="index === 0">收款{{ item.receive }} ｜ </span>
          <span v-if="index === 0">付款{{ item.pay }}</span>


          <SingleLine v-if="index === 1" :option="option" :chartData="subProjecDataList" :seriesColor="seriesColor" height="50px"></SingleLine>

          <Bar v-if="index === 2" :option="option" :chartData="paymentRequestDataList" :seriesColor="seriesColor" height="50px"></Bar>

          <Progress v-if="index === 3" :percent="item.total" :show-info="false"></Progress>
        </div>

        <template #footer v-if="type === 'chart'">
          <span v-if="index !== 3">{{ item.footer }}<span>{{ item.value }}</span>
          </span>
          <span v-else>已收款金额<span>{{ item.value }}</span>
          </span>

        </template>

      </ChartCard>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted, watch } from 'vue';
  import { Icon } from '/@/components/Icon';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { Progress } from 'ant-design-vue';
  import ChartCard from '/@/components/chart/ChartCard.vue';
  import Trend from '/@/components/chart/Trend.vue';
  import Bar from '/@/components/chart/Bar.vue';
  import SingleLine from '/@/components/chart/SingleLine.vue';
  import { chartCardList, bdcCardList } from '../data';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import JSelectMultiple from '../../../../components/Form/src/jeecg/components/JSelectMultiple.vue';
import { getDataListData, getPaymentRequestChartList, getSubProjectdataChartList } from '@/views/common.api';

  const { getThemeColor } = useRootSetting();
  const projectIds = ref();
  const props = defineProps({
    loading: {
      type: Boolean,
    },
    type: {
      type: String,
      default: 'chart',
    },
    projectId: {
      type: [String, Number],
      required: false,
    },
  });



  const option = ref({ xAxis: { show: false, boundaryGap: false }, yAxis: { show: false, boundaryGap: false, max: 220 } });


  const seriesColor = computed(() => {
    return getThemeColor.value;
  })


  function getTotal(total, index) {
    return index === 0 ? `￥${total}` : index === 3 ? `${total}%` : total;
  }

  onMounted(() => {
    projectIds.value = "1937357265828864002"
    getDataList()
    getSubProject()
    getPaymentRequestDataChartList()
  });

const dataList= ref();
  async function getDataList(){
    const params = {'projectId':projectIds.value}
    dataList.value = await getDataListData(params);
  }

const subProjecDataList= ref();
  async function getSubProject(){

    const params = {'projectId':projectIds.value}
    subProjecDataList.value = await getSubProjectdataChartList(params);
  }

const paymentRequestDataList= ref();
async function getPaymentRequestDataChartList(){
  const params = {'projectId':projectIds.value}
  paymentRequestDataList.value = await getPaymentRequestChartList(params);

}





watch([() => props.projectId], ([projectId]) => {
  projectIds.value = projectId
  getDataList()
  getSubProject()
  getPaymentRequestDataChartList()
})


</script>
